<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.css" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis-network.min.js"> </script>
<center>
<h1></h1>
</center>

<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->

<style type="text/css">

        #mynetwork {
            width: 1000px;
            height: 1000px;
            background-color: #ffffff;
            border: 1px solid lightgray;
            position: relative;
            float: left;
        }

        

        

        
</style>

</head>

<body>
<div id = "mynetwork"></div>


<script type="text/javascript">

    // initialize global variables.
    var edges;
    var nodes;
    var network; 
    var container;
    var options, data;

    
    // This method is responsible for drawing the graph, returns the drawn network
    function drawGraph() {
        var container = document.getElementById('mynetwork');
        
        

        // parsing and collecting nodes and edges from the python
        nodes = new vis.DataSet([{"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "job", "label": "job", "shape": "dot", "size": 10}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "worker", "label": "worker", "shape": "dot", "size": 10}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "union", "label": "union", "shape": "dot", "size": 2}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "american", "label": "american", "shape": "dot", "size": 8}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "unemployment (benefits)", "label": "unemployment (benefits)", "shape": "dot", "size": 8}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "mortgage", "label": "mortgage", "shape": "dot", "size": 2}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "exhaust", "label": "exhaust", "shape": "dot", "size": 2}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "company", "label": "company", "shape": "dot", "size": 4}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "environmental protection agency", "label": "environmental protection agency", "shape": "dot", "size": 2}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "cuba", "label": "cuba", "shape": "dot", "size": 2}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "economy", "label": "economy", "shape": "dot", "size": 2}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "people", "label": "people", "shape": "dot", "size": 6}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "money", "label": "money", "shape": "dot", "size": 4}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "courage", "label": "courage", "shape": "dot", "size": 2}]);
        edges = new vis.DataSet([{"arrows": "to", "color": "rgba(36, 75, 153, 0.7)", "from": "worker", "hidden": false, "label": "form", "to": "union", "width": 0.3333333333333333}, {"arrows": "to", "color": "rgba(36, 75, 153, 0.7)", "from": "worker", "hidden": false, "label": "exhaust", "to": "money", "width": 1.6666666666666667}, {"arrows": "to", "color": "rgba(36, 75, 153, 0.7)", "from": "worker", "hidden": false, "label": "have", "to": "exhaust", "width": 4.0}, {"arrows": "to", "color": "rgba(36, 75, 153, 0.7)", "from": "worker", "hidden": false, "label": "exhaust", "to": "unemployment (benefits)", "width": 5.666666666666667}, {"arrows": "to", "color": "rgba(36, 75, 153, 0.7)", "from": "worker", "hidden": false, "label": "look", "to": "job", "width": 7.0}, {"arrows": "to", "color": "rgba(36, 75, 153, 0.7)", "from": "american", "hidden": false, "label": "lose", "to": "unemployment (benefits)", "width": 1.0}, {"arrows": "to", "color": "rgba(36, 75, 153, 0.7)", "from": "american", "hidden": false, "label": "exhaust", "to": "unemployment (benefits)", "width": 1.3333333333333333}, {"arrows": "to", "color": "rgba(36, 75, 153, 0.7)", "from": "american", "hidden": false, "label": "lose", "to": "money", "width": 4.333333333333333}, {"arrows": "to", "color": "rgba(36, 75, 153, 0.7)", "from": "american", "hidden": false, "label": "travel", "to": "cuba", "width": 5.0}, {"arrows": "to", "color": "rgba(36, 75, 153, 0.7)", "from": "company", "hidden": false, "label": "move", "to": "job", "width": 3.3333333333333335}, {"arrows": "to", "color": "rgba(36, 75, 153, 0.7)", "from": "company", "hidden": false, "label": "ship", "to": "job", "width": 5.333333333333333}, {"arrows": "to", "color": "rgba(36, 75, 153, 0.7)", "from": "environmental protection agency", "hidden": false, "label": "do", "to": "job", "width": 8.666666666666666}, {"arrows": "to", "color": "rgba(36, 75, 153, 0.7)", "from": "economy", "hidden": false, "label": "lose", "to": "job", "width": 7.666666666666667}, {"arrows": "to", "color": "rgba(36, 75, 153, 0.7)", "from": "people", "hidden": false, "label": "remember", "to": "courage", "width": 0.3333333333333333}, {"arrows": "to", "color": "rgba(36, 75, 153, 0.7)", "from": "people", "hidden": false, "label": "lose", "to": "unemployment (benefits)", "width": 3.6666666666666665}, {"arrows": "to", "color": "rgba(36, 75, 153, 0.7)", "from": "people", "hidden": false, "label": "face", "to": "mortgage", "width": 7.0}]);

        // adding nodes and edges to the graph
        data = {nodes: nodes, edges: edges};

        var options = {"nodes": {"font": {"size": 20}}, "edges": {"color": {"inherit": true}, "font": {"size": 20}, "smooth": {"forceDirection": "none"}}, "physics": {"barnesHut": {"centralGravity": 0.5, "springLength": 100, "springConstant": 0.05, "avoidOverlap": 0.1}, "minVelocity": 0.75}};
        
        

        

        network = new vis.Network(container, data, options);
	 
        


        

        return network;

    }

    drawGraph();

</script>
</body>
</html>